<template>
  <div class="outerBox">
    <div class="topBox">
      <span class="typeface">中印方向</span>
      <button>关注对象</button>
    </div>
    <div class="middle">
      <hr />
      <div></div>
    </div>
    <div class="bottomBox">
      <div class="line" v-for="(item, index) in data.degreesList" :key="index">
        <!-- 左侧标题 -->
        <div class="left">
          {{ item.title }}
        </div>
        <div class="content">
          <div class="child" :style="{ width: item.width }">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
          </div>
        </div>
        <!-- 右侧按钮 -->
        <div class="right">
          <button class="leftButton" :style="{ backgroundColor: item.bgcolor }">
            {{ item.flag }}
          </button>
          <button class="rightutton">
            <i :class="['iconfont', item.class]"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
const props = defineProps(['ganntData']);
const data = reactive({
  degreesList: [
    // 底部盒子每行数据
    {
      title: "政府符合度",
      flag: "差",
      bgcolor: "#e14c4c",
      class: "icon-hj2-copy",
      width:'40%',
      
    },
    {
      title: "信道可用度",
      flag: "中",
      bgcolor: "#c5b41f",
      class: "icon-hj2",
      width:'60%',
    },
    {
      title: "电磁威胁度",
      flag: "强",
      bgcolor: "#a53636",
      class: "icon-hj2-copy",
      width:'100%',

    },
  ],
});
</script>

<style scoped lang='scss'>
@import "@/assets/icons/iconfont.css";
.outerBox {
  width: 364px;
  border: 2px solid #004ee9;
  border-radius: 10px;
  background-color: #ffffff;
  // float: right;
  // margin-top: 200px;
  padding: 10px;
  // 顶部样式
  .topBox {
    display: flex;
    justify-content: space-between;
    .typeface {
      font-size: 16px;
      font-weight: 700;
    }
    button {
      background-color: #0072e9;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      color: #fff;
      padding: 5px 15px;
      cursor: pointer;
    }
  }
  //分隔线
  .middle {
    position: relative;
    div {
      width: 30px;
      height: 5px;
      border-radius: 1px;
      background-color: #007ee9;
      position: absolute;
      top: -2px;
    }
  }
  // 底部样式
  .bottomBox {
    .line {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
      line-height: 20px;
      //左侧文字
      .left {
        font-size: 14px;
        font-weight: 700;
        color: #666;
        padding-top: 5px;
      }
      //中间进度条
      .content {
        flex: 1;
        height: 20px;
        border: 2px solid #e0dfde;
        margin: 5px;
        // display: flex;
        .child {
          height: 100%;
          overflow: hidden;
          // display: flex;
          .item{
            float: left;
            width: 5px !important;
            height: 100%;
            background: #1fc6ff;
            margin: 1px;
          }
          // margin: 1px;
          // border-color: #1fc6ff;
        }
      }
      // 右侧按钮
      .right {
        display: flex;
        button {
          width: 40px;
          height: 30px;
          border-radius: 3px;
          border: none;
          margin: 0 5px;
          color: #fff;
        }
        .rightutton {
          background-color: #0072e9;
          cursor: pointer;
        }
      }
    }
  }
}
</style>